<template>
	<view class="navBarWrap isBFC">
		<view class="item" v-for="item in navList" :key="item.id" hover-class="hover" @click="navigator(item.id)">
			<fr-image class="img" mode="widthFix" :src="item.icon" />
			<view class="text">{{item.title}}</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from "vue";

	const props = defineProps({
		data: Object,
		imgHost: String,
	})

	const navList = computed(() => {
		return props.data.data.map(item => {
			return {
				icon: props.imgHost + item.icon,
				id: item.id,
				title: item.title
			}
		})
	})
	const navBarStyle = computed(() => {
		const style = props.data.style;
		return {
			marginTop: style.modelTop + 'px',
			paddingRight: style.modelRight + 'px',
			marginBottom: style.modelbottom + 'px',
			paddingLeft: style.modelLeft + 'px',
		}
	})
	const navBarIconStyle = computed(() => {
		const style = props.data.style;
		return {
			height: style.iconWidth + 'px',
			width: style.iconWidth + 'px',
		}
	})
	const navBarFontStyle = computed(() => {
		const style = props.data.style;
		return {
			size: style.iconFontSize + 'px',
			color: style.iconFontColor,
		}
	})

	const navigator = (id) => {
		const map = {
			1: '/pages/new-people-qa/new-people-qa',
			2: '/pages/article/article?title=品牌介绍&id=4',
			3: '/pages/invitation-ranking/invitation-ranking',
			4: '/pages/material-center/material-center'
		}
		uni.navigateTo({
			url: map[id],
		})
	}
</script>

<style lang="scss">
	.navBarWrap {
		margin-top: v-bind('navBarStyle.marginTop');
		padding-right: v-bind('navBarStyle.paddingRight');
		margin-bottom: v-bind('navBarStyle.marginBottom');
		padding-left: v-bind('navBarStyle.paddingLeft');
		display: flex;
		align-items: center;
		justify-content: space-around;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			width: 20%;

			.img {
				width: v-bind('navBarIconStyle.width');
				height: v-bind('navBarIconStyle.height');
				border-radius: 50%;
				display: flex;
			}

			.text {
				text-align: center;
				margin-top: 4px;
				font-size: v-bind('navBarFontStyle.size');
				color: v-bind('navBarFontStyle.color');
			}
		}
	}
</style>